<template>
  <view class="answer-card-modal">
    <view class="answer-card-container">
      <view class="answer-card-header">
        <text class="answer-card-title">答题卡</text>
        <text class="close-btn" @click="$emit('close')">×</text>
      </view>
      <view class="submit-btn" @click="submitAnswers">
        <text>提交答案</text>
      </view>
      
      <view class="answer-card-content">
        <view 
          v-for="(question, index) in questions" 
          :key="index"
          class="question-item"
          :class="{
            'current': index === currentIndex,
            'answered-correct': answerStatus && answerStatus[index] && answerStatus[index].isCorrect,
            'answered-wrong': answerStatus && answerStatus[index] && !answerStatus[index].isCorrect
          }"
          @click="$emit('select', index)"
        >
          <text>{{ index + 1 }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    questions: {
      type: Array,
      default: () => []
    },
    currentIndex: {
      type: Number,
      default: 0
    },
    answerStatus: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    submitAnswers() {
      // 触发父组件的提交事件
      this.$emit('submit')
      // 关闭答题卡
      this.$emit('close')
    }
  }
}
</script>

<style>
.answer-card-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.answer-card-container {
  width: 85%;
  max-height: 75%;
  background-color: #fff;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.answer-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.answer-card-title {
  font-size: 18px;
  font-weight: bold;
}

.close-btn {
  font-size: 24px;
  color: #999;
}

.submit-btn {
  margin-top: 20px;
  background-color: #2196f3;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.submit-btn text {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}

.answer-card-content {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  overflow-y: auto;
  padding: 10px;
  max-height: 60vh;
}

.question-item {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  cursor: pointer;
}

.question-item:active {
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.current {
  background-color: #2196f3;
  color: white;
}

.answered-correct {
  background-color: #4caf50;
  color: white;
}

.answered-wrong {
  background-color: #f44336;
  color: white;
}
</style>